<template>
  <div class="swiper-container">
    <swiper class="swiper" :modules="[Navigation,Pagination]" :pagination="{
      dynamicBullets: true, // 动态分页
      clickable: true, // 点击分页切换
      type: 'progressbar', // 分页类型
    }">
      <SwiperSlide class="swiper-slide" v-for="item in 3">swiper-slide-{{ item }}</SwiperSlide>
    </swiper>
  </div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css'
</script>
<style scoped lang="scss">
.swiper-container{
  width: 100%;
  height: 100%;
  .swiper{
    width: 100%;
    height: 100%;
  }
  .swiper-slide{
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: antiquewhite;
    background-color: #ccc;
  }
}
</style>
